<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #search{
            position: fixed;
            top:20px;
            right:20px
        }
        #search button{
            width: 20px;
            height: 20px;
            margin: 5px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app"></div>
<div id="search"></div>
</body>
<script src="./data/index.js"></script>
<script>
    const app = document.querySelector("#app");
    const search = document.querySelector("#search");
    for (let key in data) {
        app.innerHTML += (`
            <div>
                <h3 id="${key.replace("*","suoyou")}">${key}</h3>
                ${data[key].map(item=>{
                    const [propName] = Object.keys(item);
                    return (`
                        <p>${propName}----->${item[propName]}</p>
                    `)
                }).join("")}
            </div>
        `)

        search.innerHTML += (`
            <button>${key}</button>
        `)
    }

    const btns = document.querySelectorAll("button");
    btns.forEach(function(btn){
        btn.onclick = function(){
            // console.log(this.innerText)
            // console.log(document.querySelector("#"+this.innerText.replace("*","suoyou")).offsetTop)
            window.scroll({
                behavior:"smooth",
                top:document.querySelector("#"+this.innerText.replace("*","suoyou")).offsetTop
            })
        }
    })
</script>
</html>